<template>
	<view class="c-container">
		<y-home-comp-title exist='true' main="dsdfsdfsd" sub="sccvsdf"></y-home-comp-title>
		<view class="c-card">
			<image class="c-img" :src="src" :id="id" :style="{'height': height + 'px'}" v-on:load="loaded($event)" @click="changeSrc()"></image>
		</view>
	</view>
</template>

<script>
	import yHomeCompTitle from './yHomeCompTitle.vue'
	import {
		genUuid
	} from '../../common/util/uuidUtil.js'

	export default {
		data() {
			return {
				src: '../../static/home/t3.png',
				id: '',
				height: '0'
			}
		},
		beforeMount() {
			this.id = 'yimg-' + genUuid()
		},
		methods: {
			loaded($event) {
				let imgWidth = $event.detail.width
				let imgHeight = $event.detail.height
				let ratio = imgWidth / imgHeight
				let that = this
				uni.createSelectorQuery().select('#' + this.id).boundingClientRect((rect) => {
					that.height = rect.width / ratio
					console.log(that.height)
				}).exec()
			},
			changeSrc() {
				this.src = 'https://yueguanjia-bucket.oss-cn-hangzhou.aliyuncs.com/search%2Fc9a565d1a2fde954b8e25b9ae3fe2d09.png'
			}
		},
		components: {
			yHomeCompTitle
		}
	}
</script>

<style lang="scss" scoped>
	.c-container {
		.c-card {
			clear: both;
			padding: 0 20upx;

			&:only-child {
				margin-top: 30upx;
			}

			.c-img {
				width: 100%;
			}
		}
	}
</style>
